<template>
  <div class="base-dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="600px"
      :close-on-click-modal="false"
      @close="resetForm"
    >
      <el-form ref="form" :model="formModel" size="mini" label-width="140px" :rules="rules">
        <el-form-item label="module序列号" prop="moduleSN">
          <el-input v-model="formModel.moduleSN" placeholder="请输入序列号" clearable id="moduleSN"></el-input>
        </el-form-item>
        <el-form-item label="module类型" prop="moduleType">
          <!-- <el-input v-model="formModel.moduleType" placeholder="请输入module类型" clearable id="moduleType"></el-input> -->
            <commonSelect v-model="formModel.moduleType" style="width: 100%;" :list="[{id:'M3',name:'M3'},{id:'M6',name:'M6'}]"
                :placeholder="'请选择'" :clearable="false">
            </commonSelect>
        </el-form-item>
        <el-form-item label="所在线/机器" prop="machineId">
          <el-cascader v-model="formModel.lineIdMachineId" ref="cascader" @change="handleChange"
          :options="onlineOptions" style="width:100%;"></el-cascader>
          <!-- :props="storeParams" handleChange 的参数会值有叶子节点数据value。取消后获取级联的value数组[] -->
        </el-form-item>
        <el-form-item label="moduleNo(位置号)" prop="moduleNo">
          <el-input type="number" v-model="formModel.moduleNo" placeholder="请输入moduleNO" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="下次周保养时间" prop="nextWeekMainteDate">
          <el-date-picker
            v-model="formModel.nextWeekMainteDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
            id="nextWeekMainteDate"
          ></el-date-picker>
        </el-form-item> -->

        <el-form-item label="下次月保养时间" prop="nextMonthMainteDate">
          <el-date-picker
            v-model="formModel.nextMonthMainteDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
            id="nextMonthMainteDate"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="下次季度保养时间" prop="nextQuarterMainteDate">
          <el-date-picker
            v-model="formModel.nextQuarterMainteDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
            id="nextQuarterMainteDate"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="下次年度保养时间" prop="nextYearMainteDate">
          <el-date-picker
            v-model="formModel.nextYearMainteDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="请选择日期"
            id="nextYearMainteDate"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getNXTLineMachineInfo, AddModuleInfo, EditModuleInfo } from '@/network/moduleMaintain'
import commonSelect from '@/components/commonSelect.vue';
export default {
  name: 'addDialog',
  components: {
      commonSelect
  },
  props: {
    value: { require: true, type: Boolean },
    dialogTitle: {
      type: String,
      default: "新增"
    },
    itemInfo: {
      type: Object,
      default: function () {
        return {};
      }
    },
  },
  data() {
    return {
      formModel: this.itemInfo,
      rules: {
        moduleSN: [{ required: true, message: '请输入序列号', trigger: 'blur' },],
        moduleType: [{ required: true, message: '请输入module类型', trigger: 'blur' }],
        moduleNo: [{ required: true, message: '请输入moduleNo', trigger: 'blur' }],
        machineId: [{ required: true, message: '请选择所在线/机器', trigger: 'blur' }],
        // nextWeekMainteDate: [{ required: true, message: '请选择日期', trigger: 'blur' }],
        nextMonthMainteDate: [{ required: true, message: '请选择日期', trigger: 'blur' }],
        nextQuarterMainteDate: [{ required: true, message: '请选择日期', trigger: 'blur' }],
        nextYearMainteDate: [{ required: true, message: '请选择日期', trigger: 'blur' }],
      },
      onlineOptions: [],
      storeParams: {
        label: 'label',
        value: 'value',
        children: 'children',
        checkStrictly: false,
        emitPath: false
      },
      confirmLoading: false,
      title: this.dialogTitle
    }
  },
  mounted() {
    this.getNXTLineMachineInfo()
    this.showkey()
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    }

  },
  methods: {
    //在methods中
    showkey() {
      document.onkeydown = function () {
        if (window.event.keyCode == 13) {
          window.event.returnValue = false;
        }
      };
    },
    async getNXTLineMachineInfo() {
      try {
        const { data, status } = await getNXTLineMachineInfo()
        console.log(data);
        if (status === 200) {
          this.onlineOptions = this.formatLineMachineData(data);
        }
      } catch (error) {
        console.log(error);
      }
    },
    formatLineMachineData(data) {
        return data.map(line => ({
            label: line.lineName,
            value: line.lineId,
            children: line.machines.map(machine => ({
                label: machine.machineName,
                value: machine.machineId
            }))
        }));
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.formModel = {
        moduleSN: '',
        moduleType: '',
        moduleNo: 0,
        machineId: null,
        lineIdMachineId:[],
        // nextWeekMainteDate: '',
        nextMonthMainteDate: '',
        nextQuarterMainteDate: '',
        nextYearMainteDate: ''
      }
    },
    handleClose() {
        this.visible = false;
        this.$emit('close');
    },
    handleSubmit() {
      this.$refs['form'].validate(async (v) => {
        if (v) {
          this.confirmLoading = true;
          try {
            let data;
            if (this.title == "新增") {
              const res=await AddModuleInfo(this.formModel);
              if(res.status!==200){
                return;
              }
              data=res.data;
              this.$message({ message: '新增成功', type: 'success' });
              this.$emit('refresh',true,data);

              this.resetForm();
            } else if (this.title == "编辑") {
              const res=await EditModuleInfo(this.formModel)
              if(res.status!==200){
                return;
              }
              data=res.data;
              this.$message({ message: '修改成功', type: 'success' });
            //   this.$emit('refresh',false,data); // 未根据传递的data更改，暂时调用Close
              this.$emit('close');
              this.visible = false;
            }
          } finally {
            this.confirmLoading = false;
          }
        }
      });
    },
    handleChange(value) {
        this.formModel.machineId=value[1];
    }
  }
}
</script>